<!-- 用户编辑弹窗 -->
<template>
  <el-dialog   append-to-body width="80%" :visible="visible" :lock-scroll="false" :destroy-on-close="true" custom-class="ele-dialog-form"
             title="数据详情" @update:visible="updateVisible">
    <!-- 数据表格 -->
    <ele-pro-table ref="table" :where="where" :datasource="url" :columns="columns" :selection.sync="selection">
      <template slot="thumb_url" slot-scope="{row}">
        <el-avatar shape="square" :size="50" :src="row.thumb_url"/>
      </template>
    </ele-pro-table>
  </el-dialog>
</template>

<script>

export default {
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    id: Number
  },
  components: {},
  data () {
    return {
      // 表格数据接口
      url: '/data/orderList',
      // 表格列配置
      columns: [
        {
          prop: 'order_sn',
          label: '订单编号',
          width: 200,
          align: 'center',
          showOverflowTooltip: true,
          fixed: "left"
        },
        {
          prop: 'shop_num',
          label: '店铺编号',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 40,
        },
        {
          prop: 'shop_name',
          label: '店铺名称',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 50,
        },
        {
          prop: 'goods_id',
          label: '商品ID',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 80,
        },
        {
          prop: 'goods_name',
          label: '商品名称',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100,
        },
        {
          columnKey: 'thumb_url',
          label: '图片',
          width: 100,
          align: 'center',
          resizable: false,
          slot: 'thumb_url',
        },
        {
          prop: 'goods_price',
          label: '商品价格',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 30,
        },
        {
          prop: 'goods_number',
          label: '商品数量',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 30,
        },
        {
          prop: 'goods_amount',
          label: '商品总额',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 30,
        },
        {
          prop: 'order_amount',
          label: '订单总额',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 30,
        },
        {
          prop: 'out_sku_sn',
          label: '规格编码',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 50,
        },
        {
          prop: 'spec',
          label: '规格',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 50,
        },
        {
          prop: 'order_time',
          label: '订单时间',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 50,
          formatter: (row, column, cellValue) => {
            return this.$util.toDateString(cellValue);
          }
        }
      ],
      // 表格搜索条件
      where: {'id':this.ID},
      // 表格选中数据
      selection: [],
    };
  },
  // watch: {
    // openEdit() {
    //
    // },
    // ID (newValue) {
    //   this.where.id = newValue
    //   this.$refs.table.reload({where: this.where});
    // },

  // },
  mounted () {
    console.log(this.id)
    this.where.id = this.id
    this.$refs.table.reload({where: this.where});
  },
  methods: {
    /* 更新visible */
    updateVisible (value) {
      this.$emit('update:visible', value);
    },
  }
}
</script>

<style scoped></style>
